<template>
  <div class="emailDetail">
    <header>
      <span><i class="iconfont icon-fanhui" @click="$router.go(-1)"></i> 规则分析 【{{info.activityName}}】</span>
    </header>
    <ul class="preview">
      <li>
        <h1>{{info.sendCount}}</h1>
        <p>发送总量</p>
      </li>
      <li>
        <h1>{{info.succeedSendCount}}</h1>
        <p>已送达</p>
      </li>
      <li>
        <h1>{{info.openCountRate}}</h1>
        <p>已打开</p>
      </li>
      <li>
        <h1>{{info. clickCountRate}}</h1>
        <p>已点击</p>
      </li>
    </ul>
    <el-table :data="tableData" >
      <el-table-column prop="activityName" label="规则名称"></el-table-column>
      <el-table-column prop="sendCount" label="邮件总数"></el-table-column>
      <el-table-column prop="succeedSendCount" label="已发送"></el-table-column>
      <el-table-column prop="succeedSendCountRate" label="送达率"></el-table-column>
      <el-table-column prop="openCount" label="打开数"></el-table-column>
      <el-table-column prop="clickCountRate" label="点击率"></el-table-column>
      <el-table-column prop="spamCount" label="退信&投诉"></el-table-column>
    </el-table>
    <!--灰色间隔线-->
    <div class="bottom-content" style="margin-top: 20px">
      <h1 class="title">规则分析</h1>
      <div class="tableList">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="`发送总量(${info.sendCount})`" name="1">
            <TableListAll :ruleID="ruleID"></TableListAll>
          </el-tab-pane>
          <el-tab-pane :label="`送达未打开(${info.sendNoOpenCount})`" name="2">
            <TableListTwo :ruleID="ruleID"></TableListTwo>
          </el-tab-pane>
          <el-tab-pane :label="`已打开(${info.openCount})`" name="3">
            <TableListThree :ruleID="ruleID"></TableListThree>
          </el-tab-pane>
          <el-tab-pane :label="`打开未点击(${info.openNoClickCount})`" name="4">
            <TableListFour :ruleID="ruleID"></TableListFour>
          </el-tab-pane>
          <el-tab-pane :label="`点击(${info.clickCount})`" name="5">
            <TableListFive :ruleID="ruleID"></TableListFive>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>

    import TableListAll from '@/components/automation/marketStatic/TableListAll'
    import TableListTwo from '@/components/automation/marketStatic/TableListTwo'
    import TableListThree from '@/components/automation/marketStatic/TableListThree'
    import TableListFour from '@/components/automation/marketStatic/TableListFour'
    import TableListFive from '@/components/automation/marketStatic/TableListFive'
    import {getEmailStaticDetail} from '@/api/marketStatic/email'

    export default {
        name: "emailDetail",
        components: {TableListAll, TableListTwo, TableListThree, TableListFour, TableListFive},
        data() {
            return {
                tableData: [],
                searchContent: '',
                activeName: '1',
                info: {
                    sendCount: 0,
                    succeedSendCount: 0,
                    openCount: 0,
                    openNoClickCount:0,
                    clickCount: 0,
                    spamCount: 0,
                    sendNoOpenCount: 0
                },
                ruleID: '',
                type: 1
            }
        },
        created() {
            this.ruleID = this.$route.params.id;
            this.getData();
        },
        methods: {
            getData() {
                getEmailStaticDetail({ruleId: this.ruleID}).then(res => {
                    if (res.data.success) {
                        this.info = res.data.data;
                        this.tableData.push(this.info)
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
  .emailDetail {

    header {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      color: #000;
      font-size: 16px;

      i {
        font-size: 18px;
        color: #0a6cd6;
        margin-right: 5px;
        cursor: pointer;
      }

      .el-input.el-input--small.el-input--prefix {
        width: 250px;
      }
    }

    .preview {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px !important;

      li {
        background-size: 100% 100%;
        width: 17%;
        background: url('../../../../public/img/bg1.png') no-repeat;
        background-size: 100% 100%;
        padding: 2.5% 2%;
        color: #325893;

        h1 {
          font-size: 28px;
          margin-bottom: 30px;
        }

        p {
          font-size: 16px;
        }
      }
    }

    li:nth-child(2) {
      background: url('../../../../public/img/bg2.png') no-repeat;
      background-size: 100% 100%;
    }

    li:nth-child(3) {
      background: url('../../../../public/img/bg3.png') no-repeat;
      background-size: 100% 100%;
    }

    li:nth-child(4) {
      background: url('../../../../public/img/bg4.png') no-repeat;
      background-size: 100% 100%;
    }

    .gray {
      height: 25px;
      margin-left: -10px;
      margin-right: -10px;
      margin-top: 5px;
      background-color: #F5F5F5;
    }

    .bottom-content {
      .title {
        color: #000;
        font-size: 16px;
        padding: 15px 0;
      }
    }
  }
</style>
